<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2024-02-27 14:59:03
 * @LastEditTime: 2024-07-09 15:03:57
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \dance\pages\me\components\collect.vue
-->
<template>
  <view class="collect">
    <!-- <view class="collect-item" v-for="item in ajax.list" :key="item.id">
      <z-course-card :data="item"></z-course-card>
    </view> -->
    <view v-for="(item, index) in ajax.list" :key="item.id" class="item">
      <view class="item-info">
        <uv-avatar :src="item.profilePhoto || defaultImages[2]" size="169rpx" mode="aspectFill" @click="onGoTeacher(item)"></uv-avatar>
        <view class="text">
          {{ item.username }}
        </view>
      </view>
      <view class="item-collect" @click.stop="httpCollect(item, index)"> 已收藏 </view>
    </view>
    <view v-if="ajax.list.length === 0" class="empty">
      <view class="empty-text">还没有收藏的老师</view>
    </view>
    <view class="collect-button" @click.stop="onGoRegisterTeacher">
      <uv-icon class="icon" name="plus" color="#fff" size="28rpx"></uv-icon>
      <text class="collect-button-text">老师入驻</text>
    </view>
    <uv-toast ref="toastRef"></uv-toast>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
  import { ref, reactive, defineProps, watch, defineEmits, defineExpose } from 'vue';
  import { defaultImages } from '@/common/js/global.js';
  let initShow = ref(false);
  const toastRef = ref();

  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    classify: 'Teacher',
    sort: 0
  });

  // 初始化解决日期选项
  let ajax = reactive({
    list: []
  });
  let props = defineProps({
    current: {
      type: Number,
      default: 0
    }
  });
  const httpMineCollect = async (reset = false) => {
    let options = JSON.parse(JSON.stringify(params));
    options.orderBy = ['Teacher', params.sort ? 'asc' : 'desc'];
    let data = await uni.$uv.http.post('/app/collect/teachers', options);
    if (reset) {
      ajax.list.splice(0, ajax.list.length, ...data.teachers);
    } else {
      ajax.list.push(...data.teachers);
    }
  };
  // 触发子组件更新事件
  const sonChange = ({ type, sort }) => {
    if (type == 'scrollDown') {
      params.currentPage++;
      httpMineCollect();
    } else if (type === 'search') {
      params.currentPage = 1;
      httpMineCollect(true);
    } else if (type === 'sort') {
      params.currentPage = 1;
      params.sort = sort;
      httpMineCollect(true);
    }
  };
  defineExpose({ sonChange });

  let httpCollect = async (item, index) => {
    await uni.$uv.http.post(`app/collect/cancel`, {
      classify: 'Teacher', //收藏类型
      objid: item.id, //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    ajax.list.splice(index, 1);
    toastRef.value.show({
      overlay: false,
      message: `取消收藏成功`,
      type: 'success'
    });
  };
  // 查看老师
  const onGoTeacher = val => {
    uni.$uv.route({
      url: '/pages/me/share',
      params: {
        id: val.id
      }
    });
  };
  // 注册老师
  const onGoRegisterTeacher = () => {
    uni.$uv.route({
      url: '/pages/teacher/register'
    });
  };
</script>

<style lang="scss" scoped>
  .collect {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    width: 100%;
    padding: 0 44rpx 105rpx;
    box-sizing: border-box;

    .empty {
      color: #808080;
      font-size: 26rpx;
      width: 100%;
      &-text {
        text-align: center;
        margin-top: 80rpx;
        border-bottom: 1px solid #545454;
        padding-bottom: 49rpx;
      }
    }
    // &-item {
    //   width: 49%;
    //   border-radius: 4px;
    //   position: relative;
    //   margin-bottom: 17rpx;
    //   margin-top: 17rpx;
    //   padding-left: 17rpx;
    //   box-sizing: border-box;
    // }
    .item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #545454;
      padding: 19rpx 12rpx;
      &-info {
        display: flex;
        .text {
          width: 55%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 42rpx;
          margin-left: 19rpx;
        }
      }

      &-collect {
        width: 124rpx;
        height: 51rpx;
        line-height: 51rpx;
        text-align: center;
        font-size: 28rpx;
        border-radius: 49rpx;
        background-color: #b1b1b1 !important;
      }
    }
    &-button {
      position: absolute;
      // #ifdef MP-WEIXIN
      bottom: 33rpx;
      // #endif
      // #ifdef H5
      bottom: 130rpx;
      // #endif
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $dance-main-color;
      height: 73rpx;
      border-radius: 35rpx;
      font-weight: bold;
      font-size: 35rpx;
      width: 263rpx;
      &-text {
        margin-left: 8.5rpx;
      }
    }
  }
</style>
